import React from 'react';
import {Input, Select, Space} from "antd";

import "./SelectMonth.css" ;
interface SelectMonthProps {
    /**
     * 选择月份的回调函数
     * @param value 选择的月份
     */
    changeMonth: (value: number) => void ;
    /**
     * 默认月份
     */
    defaultMonth: number ;

}
const SelectMonth = ({ changeMonth,defaultMonth }: SelectMonthProps) => {
    return (
        <Space.Compact>
            <Input className={"table-toolbar-input"} readOnly value={"选择月份"}/>
            <Select className={"table-toolbar-select"} defaultValue={defaultMonth} onSelect={changeMonth} placeholder="选择月份数据" style={{width: "170px"}} >
                <Select.Option value={1}>[一月] January</Select.Option>
                <Select.Option value={2}>[二月] February</Select.Option>
                <Select.Option value={3}>[三月] March</Select.Option>
                <Select.Option value={4}>[四月] April</Select.Option>
                <Select.Option value={5}>[五月] May</Select.Option>
                <Select.Option value={6}>[六月] June</Select.Option>
                <Select.Option value={7}>[七月] July</Select.Option>
                <Select.Option value={8}>[八月] August </Select.Option>
                <Select.Option value={9}>[九月] September</Select.Option>
                <Select.Option value={10}>[十月] October</Select.Option>
                <Select.Option value={11}>[十一月] November</Select.Option>
                <Select.Option value={12}>[十二月] December</Select.Option>
            </Select>
        </Space.Compact>
    );
};

export default SelectMonth;